<script setup>
import {UserOutlined, LockOutlined} from '@ant-design/icons-vue';
import {reactive, ref} from 'vue';
import {rules} from "@/views/login/config";
import { useStore } from 'vuex'

const loginFormRef = ref(null)
const store = useStore()

const formState = reactive({
  username: 'admin',
  password: '123456',
});


const loginAction = () => {
  loginFormRef.value.validate().then(() => {
    // 验证通过
    store.dispatch('loginAction',{...formState})
  })
}


defineExpose({
  loginAction
})

</script>

<template>
  <a-form
      ref="loginFormRef"
      :model="formState"
      :rules="rules"
  >
    <a-form-item label="账号" name="username">
      <a-input v-model:value.trim="formState.username" placeholder="Username">
        <template #prefix>
          <UserOutlined style="color: rgba(0, 0, 0, 0.25)"/>
        </template>
      </a-input>
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input-password v-model:value.trim="formState.password" placeholder="Password" autocomplete="on">
        <template #prefix>
          <LockOutlined style="color: rgba(0, 0, 0, 0.25)"/>
        </template>
      </a-input-password>
    </a-form-item>

  </a-form>
</template>
